<template>
	<div class="view-signIn">
		<div class="signIn-main flex flex-direction-v flex-center-vh">
			<h3 class="title">登录</h3>
			<mt-field label="手机号" placeholder="请输入手机号" v-model="phone"></mt-field>
			<mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
			<mt-button @click="submitSignInForm" class="submit-signIn" type="default" plain>确定</mt-button>
		</div>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import _userService from '@/service/userService';

	export default {
		name: 'zVuexDemo',
		data() {
			return {
				phone: '',
				password: '',
			}
		},
		created() {
			let vm = this;
			console.log('登录次数(state)：' + vm.signInTimes);
			console.log('登录次数(getter)：' + vm.user_signInTimes_getter);
			vm.ADD_SIGNIN_TIME();
		},
		computed: {
			...mapState({
				signInTimes: state => state.user.signInTimes,
			}),
			...mapGetters([
				'user_signInTimes_getter',
			])
		},
		methods: {
			...mapMutations([
				'ADD_SIGNIN_TIME',
			]),
			...mapActions([
				'ADD_SIGNIN_TIME_ASYNC'
			]),
			submitSignInForm() {
				let vm = this;
				// 记录登录次数，异步操作
				vm.ADD_SIGNIN_TIME_ASYNC();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view-signIn {
		.signIn-main {
			padding: 20px;
			.title {
				margin-bottom: 20px;
				text-align: center;
			}
			.submit-signIn {
				display: block;
				width: 90%;
				margin-top: 20px;
			}
		}
	}
</style>